<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('图纸解析')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
         <form enctype="multipart/form-data" id="fileForm">
             <div class="btn-group-sm" id="toolbar" role="group">
                 <div class="fileinput fileinput-new" id="attachmentInputs1" data-provides="fileinput">
                     <span class="btn btn-white btn-file">
                         <span class="fileinput-new">上传文件</span>
                         <input type="file" id="file1" multiple="multiple" onchange="findFile()" name="...">
                     </span>
                 </div>
                <!--实现进度条显示-->
                     <div class="container" id="jdt" style="float: right" >
                         <div class="row">
                             <div class="col-md-offset-3 col-md-6" style="margin-top: 8px; height: 23px">
                                 <div class="progress">
                                     <div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length"
                                          style="width: 0%;">
                                         <div class="progress-value" id="mt-progress-value">0%</div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>

             </div>
         </form>
         <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
     </div>
    <th:block th:include="include :: footer" />

<script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('dxfcomponent:cad:edit')}]];
        var searchFlag = [[${@permission.hasPermi('dxfcomponent:cad:search')}]];
        var removeFlag = [[${@permission.hasPermi('dxfcomponent:cad:remove')}]];
        var prefix = ctx + "dxfcomponent/cad";
        var win = '';
        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                searchUrl: prefix + "/search/{id}",
                removeUrl: prefix + "/remove",
                modalName: "图纸索引信息",
                pagination: false,
                onLoadSuccess: function() {
                    $.modal.closeLoading();
                },
                columns: [
                    // {
                    // checkbox: true
                    // },
                {
                    title: "序号",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field : 'drawId', 
                    title : '索引id',
                    visible: false
                },
                {
                    field : 'fileId',
                    title : '文件id',
                    visible: false
                },
                {
                    field : 'fileCode', 
                    title : '文件编码'
                },
                {
                    field : 'fileName', 
                    title : '文件名称'
                },
                {
                    field : 'version', 
                    title : '版本'
                },
                {
                    field : 'edition', 
                    title : '版次'
                },
                {
                    field : 'system', 
                    title : '系统'
                },
                {
                    field : 'subitem', 
                    title : '子项'
                },
                {
                    field : 'status',
                    title : '状态',

                    formatter: function(value, row, index){
                        console.log(value);
                        if(value == 0) return "<span class=\"text-danger \">文件解析失败</span>";
                        else if(value ==1) return "<span>图幅边界获取失败</span>";
                        else return "-";
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs' + searchFlag + '" href="javascript:void(0)" onclick="searchDraw(\'' + row.fileId + '\' , \''+ row.status + '\')"><i class="fa fa-edit"></i>查看数据</a> ');
                        // actions.push('&nbsp;&nbsp;<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="edit(\'' + row.fileId + '\')"><i class="fa fa-edit"></i>查看J</a> ');
                        // actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.drawId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('&nbsp;<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.fileId + '\')"><i class="fa fa-remove"></i>删除</a>');

                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        var totalSize = 0;
        $(":file").change(function () {
          //  $("#jdt").show();
            var file = this.files[0];
            var name = file.name;
            var size = file.size;
            var type = file.type;

            url = window.URL.createObjectURL(file);

            totalSize += size;

            $(".show_info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);

            // 恢复进度条的状态
            //背景成绿色
            $(".progress").css("background", "#262626");
            //归零 隐藏
            $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
            $("#mt-progress-value").html(0);

        })

        /***
         * 实现文件上传
         */
        function findFile(){

            //背景恢复
            $(".progress").css("background", "#262626");
            //归零 隐藏
            $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
            $("#mt-progress-value").html(0);

            var doc = document.getElementById('file1');
            if (doc.files.length>10){
                alert("最多上传10份文件！");
                return false;
            }
            for(var i=0;i<doc.files.length;i++){
                var name = doc.files[i].name;
                var hz = name.substring(name.lastIndexOf(".")+1);
                if(hz!="dxf" && hz!="dwg" && hz!="DWG"){
                   // alert("该功能暂未实现，请手动转为.dxf文件上传！");
                    alert("该文件格式暂不支持，请上传dwg或dxf文件！");
                    return false;
                }
            }
            var formData = new FormData();
            //注入 name=file
            var files = $("#attachmentInputs1 input[type='file']");

            for (var i = 0; i < files[0].files.length; i++) {
                formData.append("files", files[0].files[i]);
            }
            $.modal.loading("正在解析中，请稍后...");
            //执行上传
            $.ajax({
                url:  prefix + '/add',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                xhr: function () {
                    //获取ajax中的ajaxSettings的xhr对象  为他的upload属性绑定progress事件的处理函数
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        //检查其属性upload是否存在
                        myXhr.upload.addEventListener("progress", resultProgress, false);
                    }
                    return myXhr;
                },
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                         $.modal.alertSuccess("解析成功");

                        successCallback();

                    } else if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg)

                    } else {
                        $.modal.alertError(result.msg);
                        $.modal.closeLoading();
                    }
                },
                error:function (xhr,text) {
                    if(text === 'timeout'){
                        xhr.abort();
                    }
                    $.modal.alertSuccess("解析失败·");
                }
            });
        }

        // 上传进度回调函数
        function resultProgress(e) {
            if (e.lengthComputable) {
                var percent = e.loaded / e.total * 100;
                $(".show_result").html(percent + "%");
                var percentStr = String(percent);
                if (percentStr == "100") {
                    percentStr = "100.0";
                }
                percentStr = percentStr.substring(0, percentStr.indexOf("."));
                $("#mt-progress-value").html(percentStr);
                $("#mt-progress-length").css("width", percentStr + "%");

                if (percentStr == "100") {
                    setTimeout(function () {
                        //背景成绿色
                        $(".progress").css("background", "#15AD66");
                        //归零 隐藏
                        $("#mt-progress-length").css({"width": "0%", "opacity": "0"});
                    }, 500);
                }
            }
        }

        /***
         * 实现设备信息查看
         * @param id
         */
        function searchDraw(id, status) {
            if(status != '0'){
                var img = prefix + "/view?fileId=" + id;
                var component = prefix + "/search?fileId=" + id;

                win = window.open (img);
                window.open (component);
            }else{
                $.modal.alertError("文件解析失败，请联系管理员处理");
            }
        }

        function add(id) {
            table.set();
            $.modal.open("添加" + table.options.modalName, $.operate.addUrl(id), 300, 200);
        }

        // 实现主页面窗口刷新
        function successCallback() {
            if(win!=''){
                win.close();
            }
            $.table.refresh();
        }

    </script>
</body>
</html>